<template>
	<view class="wrapper address address-safe-area">
		<!--内容-->
		<view class="address-content">
			<view class="address-list">
				<!-- <uni-swipe-action> -->
					<view class="address-item" v-for="(item, index) in tableList" :key="item.id">
						<!-- <uni-swipe-action-item
							:right-options="options"
							:autoClose="false"
							:show="item.show"
							@change="changeSwipe(item, index, $event)"
							@click="clickSwipe(item, index, $event)"> -->
							<view class="address-item-content main-flex">
								<view class="address-item-content-l main-flex-item" @click="clickAddress(item, $event)">
									<view class="address-item-top main-flex">
										<uni-tag
											v-if="item.defaultFlag === 1"
											class="address-item-label"
											custom-style="
												margin-right: 20rpx;
												line-height: 24rpx;
												font-size: 20rpx;
												background-color: #e3230e;
												border-color: #e3230e;
												color: #fff;"
											text="默认"
											size="mini" ></uni-tag>
										<uni-tag
											v-if="item.addrLabel"
											class="address-item-label"
											custom-style="
												margin-right: 20rpx;
												line-height: 24rpx;
												font-size: 20rpx;
												background-color: #FF9500;
												border-color: #FF9500;
												color: #fff;"
											:text="item.addrLabel"
											size="mini" ></uni-tag>
										<view class="address-item-addr">{{item.addr}}</view>
									</view>
									<view class="address-item-detail">{{item.detail}}</view>
									<view class="address-item-bottom main-flex">
										<view class="address-item-contacts">{{item.contacts}}</view>
										<view class="address-item-phone">{{item.phone}}</view>
									</view>
									<view class="address-item-other main-flex">
										<view class="address-item-other-item main-flex" @click.stop="editAddress(item)">
											<uni-icons type="compose" color="#333333" size="20"></uni-icons>
											<view class="address-item-other-item-name">编辑</view>
										</view>
										<view class="address-item-other-item main-flex" @click.stop="delAddressFun(item.id)">
											<uni-icons type="trash" color="#e3230e" size="20"></uni-icons>
											<view class="address-item-other-item-name del">删除</view>
										</view>
									</view>
								</view>
								<!-- <view class="address-item-content-r" @click.stop="editAddress(item, index)">
									<uni-icons type="compose" size="24"></uni-icons>
								</view> -->
								<view class="address-item-choose" v-if="type == 2 && addressId == item.id">已选</view>
							</view>
						<!-- </uni-swipe-action-item> -->
					</view>
				<!-- </uni-swipe-action> -->
			</view>
			
			<!--新增地址-->
			<view class="address-add safe-area">
				<view class="address-add-box main-flex">
					<button class="ty-button ty-button-confirm address-add-btn" @click="editAddress">+新增收货地址</button>
				</view>
			</view>
			
			<!--加载-->
			<view
				v-if="isNull"
				class="null main-flex">
				<u-empty text="地址为空" icon="/static/images/null.png"></u-empty>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { computed, isRef, ref, watch } from 'vue';
import { onReady, onLoad, onReachBottom, onShow, onHide, onUnload } from '@dcloudio/uni-app';
import useUserStore from '@/store/modules/user'
import useSetStore from '@/store/modules/set'
import { addressList, delAddress, defaultAddress} from "@/api/app_api/user"
import { throttle, debounce } from '@/uni_modules/uview-plus'
import modal from '@/plugins/modal'

	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const type = ref(0)
	
	const options = ref([{
			text: '设为默认',
			style: {
				backgroundColor: '#e5e5e5',
				color: '#333333',
				fontSize: '24rpx'
			}
		},{
			text: '删除',
			style: {
				backgroundColor: '#e3230e',
				color: '#FFFFFF',
				fontSize: '24rpx'
			}
		}])
	
	// 列表查询
	const tableList = ref([])
	const isLoading = ref(false)
	const status = ref('more')
	const isNull = ref(false)
	const searchFirst = () => {
		tableList.value = []
		getList()
	}
	
	const getList = () => {
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		addressList().then(res => {
			tableList.value = res.data.map(item => {
				return {
					...item,
					show: 'none'
				}
			}) || []
			isNull.value = tableList.value.length === 0
			isLoading.value = false
			uni.hideLoading()
		}).catch(() => {
			isLoading.value = false
			isNull.value = true
			uni.hideLoading()
		})
	}
	
	const changeSwipe = (item, index, e) => {
		if (e !== 'none') {
			tableList.value = tableList.value.map((item, i) => {
				item.show = index == i ? e : 'none'
				return item
			})
		}
	}
	
	const clickSwipe = (item, index, e) => {
		if (e.index === 0 && e.position === 'right') {
			defaultAddressFun(item.id)
		} else if (e.index === 1 && e.position === 'right') {
			delAddressFun(item.id)
		}
	}
	
	// 编辑地址
	const editAddress = (item) => {
		if (item.id) {
			uni.setStorageSync('setAddr', item)
		}
		uni.navigateTo({
			url: item?.id ? `/pages/address/edit?id=${item.id}` : `/pages/address/edit`
		})
	}
	
	const isDools = ref(false)
	// 设为默认
	const defaultAddressFun = (id) => {
		if (isDools.value) return false
		isDools.value = true
		defaultAddress({
			id
		}).then(res => {
			getList()
			isDools.value = false
			uni.$u.toast(res.msg)
		}).catch(err => {
			isDools.value = false
		})
	}
	
	//删除地址
	const delAddressFun = (id) => {
		if (isDools.value) return false
		isDools.value = true
		delAddress({
			id
		}).then(res => {
			getList()
			isDools.value = false
			uni.$u.toast(res.msg)
		}).catch(err => {
			isDools.value = false
		})
	}
	// 已选择的地址
	const addressId = ref('')
	const clickAddress = (item) => {
		if (type.value == 2) {
			addressId.value = item.id
			uni.setStorageSync('addressId', item.id)
			uni.$emit('chooseAddress')
			uni.navigateBack({
				delta: 1
			})
		}
	}
	
	onLoad((option) => {
		if (option.type) {
			type.value = option.type
		}
		searchFirst()
		addressId.value = uni.getStorageSync('addressId') || ''
		uni.$on('refresh', () => {
			getList()
		})
	})
	onUnload(() => {
		uni.$off('refresh')
	})
</script>

<style lang="scss">
	.address {
		&-safe-area {
			padding-bottom: calc(constant(safe-area-inset-bottom) + 108rpx);
			padding-bottom: calc(env(safe-area-inset-bottom) + 108rpx);
		}
		&-content {
			padding: 20rpx;
		}
		&-item {
			background-color: #ffffff;
			overflow: hidden;
			border-bottom: 1px solid #f5f5f5;
			border-radius: 20rpx;
			&+.address-item {
				margin-top: 20rpx;
			}
			&-content {
				position: relative;
				padding: 20rpx 0;
				&-l {
					padding: 0 20rpx;
				}
				&-r {
					padding: 20rpx;
				}
			}
			:deep(.uni-swipe_button) {
				position: relative;
				width: 120rpx;
				height: 100%;
				box-sizing: border-box;
				.uni-swipe_button-text {
					position: absolute;
					top: 50%;
					left: 50%;
					-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
					text-align: center;
				}
			}
			&-addr {
				color: $text-light;
				font-size: 24rpx;
			}
			&-detail {
				font-size: 24rpx;
				font-weight: 600;
				margin-top: 10rpx;
			}
			&-bottom {
				margin-top: 10rpx;
			}
			&-contacts {
				font-size: 24rpx;
			}
			&-phone {
				font-size: 24rpx;
				margin-left: 10rpx;
			}
			&-choose {
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 0rpx 20rpx 0rpx 20rpx;
				width: 72rpx;
				height: 36rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 36rpx;
				background-color: $secondary-color;
				color: #ffffff;
			}
			&-other {
				margin-top: 10rpx;
				font-size: 24rpx;
				justify-content: flex-end;
				&-item {
					margin-left: 20rpx;
				}
				.del {
					color: #e3230e;
				}
			}
		}
		&-add {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			background-color: #ffffff;
			box-sizing: border-box;
			&-box {
				width: 100%;
				padding: 20rpx;
				box-sizing: border-box;
			}
			&-btn {
				width: 100%;
				height: 68rpx;
				margin: 0;
				padding: 0;
				font-size: 24rpx;
				border-radius: 100rpx;
			}
		}
	}
</style>
